<!-- 阿米巴仓库渠道管理 -->
<template>
  <div>
    <div class="margin border">
      <div slot="header" class="clearfix text-left color padding-sm">
        <span class="margin-right-xl">查验费用配置</span>
        <el-button size="mini" type="success" @click="checkVisible = true"
          >新增</el-button
        >
      </div>
      <div class="padding">
        <el-table :data="depotAmoebaCostConfigs" class="text-sm">
          <el-table-column label="阿米巴科目名称" prop="amoebaSubjectId">
            <template slot-scope="scope">
              <span>{{
                amoebaSubjectNameMap[scope.row[scope.column.property]]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="费用名称" prop="costId">
            <template slot-scope="scope">
              <span>{{
                configPayNameMap[scope.row[scope.column.property]]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="单价" prop="price"> </el-table-column>
          <el-table-column label="操作" prop="operation">
            <template slot-scope="scope">
              <el-tooltip content="编辑" placement="top">
                <el-link
                  class="margin-right-xs"
                  :underline="false"
                  type="primary"
                  icon="el-icon-edit-outline"
                  @click="editSimpleDialogForm(scope.row.id)"
                ></el-link>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-link
                  class="margin-right-xs"
                  :underline="false"
                  type="primary"
                  icon="el-icon-delete"
                  @click="deleteDepotAmoebaCostConfigById(scope.row.id)"
                ></el-link>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="margin border">
      <div slot="header" class="clearfix text-left color padding-sm">
        <span class="margin-right-xl">贴标费用配置</span>
        <el-button size="mini" type="success" @click="labelVisble = true"
          >新增</el-button
        >
      </div>
      <div class="padding">
        <el-table :data="depotAmoebaCostLabelingConfigs" class="text-sm">
          <el-table-column label="阿米巴科目名称" prop="amoebaSubjectId">
            <template slot-scope="scope">
              <span>{{
                amoebaSubjectNameMap[scope.row[scope.column.property]]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="费用名称" prop="costId">
            <template slot-scope="scope">
              <span>{{
                configPayNameMap[scope.row[scope.column.property]]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="区间价格"
            prop="priceSectionJson"
          ></el-table-column>
          <el-table-column label="操作" prop="operation">
            <template slot-scope="scope">
              <el-tooltip content="编辑" placement="top">
                <el-link
                  class="margin-right-xs"
                  :underline="false"
                  type="primary"
                  icon="el-icon-edit-outline"
                  @click="editSimpleLabelForm(scope.row.id)"
                ></el-link>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-link
                  class="margin-right-xs"
                  :underline="false"
                  type="primary"
                  icon="el-icon-delete"
                  @click="deleteDepotAmoebaCostConfigById(scope.row.id)"
                ></el-link>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="margin border_blue">
      <div slot="header" class="clearfix text-left color_blue padding-sm">
        <span class="margin-right-xl">阿米巴仓库渠道管理</span>
        <el-button-group>
          <el-button size="mini" type="primary" @click="deleteDepotAmoebaForm()"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="exportDepotAmoebaPrice(1)"
            >导出所有公式</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="batchUploadDepotAmoebaPrice()"
            >批量上传</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="exportDepotAmoebaPrice(0)"
            >下载导入模板</el-button
          >
        </el-button-group>
      </div>
      <div class=" padding">
        <table
          border="1"
          cellpadding="0"
          cellspacing="0"
          style="table-layout:fixed; "
          class="table-data"
        >
          <thead>
            <th>物流方法</th>
            <template v-for="(item, index) in depotAmoebaSubjects">
              <th>
                {{ amoebaSubjectNameMap[item.amoebaSubjectId] }}
                <span v-if="item.storageLocationId">
                  -{{ storageLocationSelector[item.storageLocationId] }}
                </span>
                <span v-if="item.channelChargingRule">
                  -{{ chargingRuleSelector[item.channelChargingRule] }}
                </span>
              </th>
            </template>
          </thead>
          <tbody>
            <tr v-for="(m, i) in channelWayMap" class="el-table__row">
              <td>
                <span> {{ channelWayMap[i] }} </span>
              </td>
              <td v-for="(item1, index1) in depotAmoebaSubjects">
                <template
                  v-if="
                    depotAmoebaCalculateFormulaMap &&
                      depotAmoebaCalculateFormulaMap[`${i}_${item1.id}`]
                  "
                >
                  <span>
                    {{
                      depotAmoebaCalculateFormulaMap[i + "_" + item1.id].formula
                    }}
                  </span>
                </template>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 新增 -->
    <el-dialog title="查验费用配置" :visible.sync="checkVisible">
      <el-form
        size="small"
        :model="depotAmoebaCostConfig"
        label-width="100px"
        class="padding-right-xl"
      >
        <el-input
          size="mini"
          type="hidden"
          v-model="depotAmoebaCostConfig.type"
          value="3"
        ></el-input>
        <el-form-item label="阿米巴科目" prop="amoebaSubjectId">
          <el-select
            filterable
            v-model="depotAmoebaCostConfig.amoebaSubjectId"
            value-key="id"
          >
            <el-option
              v-for="(item, value) in amoebaSubjectNameMap"
              :key="value"
              :label="item"
              :value="value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="费用名称" prop="costId">
          <el-select
            filterable
            v-model="depotAmoebaCostConfig.costId"
            value-key="id"
          >
            <el-option
              v-for="(item, value) in configPayNameMap"
              :key="value"
              :label="item"
              :value="value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input v-model="depotAmoebaCostConfig.price" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="labelVisble = false">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="saveDepotAmoebaCostConfig()"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="贴标费用配置" :visible.sync="labelVisble">
      <el-form
        size="small"
        :model="depotAmoebaCostConfig1"
        label-width="100px"
        class="padding-right-xl"
      >
        <el-form-item
          label="阿米巴科目"
          prop="depotAmoebaCostConfig1.amoebaSubjectId"
        >
          <el-select
            filterable
            v-model="depotAmoebaCostConfig1.amoebaSubjectId"
          >
            <el-option
              v-for="(item, value) in amoebaSubjectNameMap"
              :key="value"
              :label="item"
              :value="value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="费用名称" prop="depotAmoebaCostConfig1.costId">
          <el-select filterable v-model="depotAmoebaCostConfig1.costId">
            <el-option
              v-for="(item, value) in configPayNameMap"
              :key="value"
              :label="item"
              :value="value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="区间价"
          v-for="(item, index) in items"
          :key="index"
          prop="priceSectionJson"
        >
          <el-input
            style="width:120px"
            class="margin-right"
            v-model="item.priceSection"
            clearable
          />
          <el-input
            style="width:120px"
            class="margin-right"
            v-model="item.priceCost"
            clearable
          />
          <el-button
            size="mini"
            type="primary"
            @click="index > 0 ? onDel(index) : onAdd(index)"
            >{{ index > 0 ? "删除区间" : "添加区间" }}</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="labelVisble = false">取 消</el-button>
        <el-button size="small" type="primary" @click="labelSave()"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <AmoebaWarehouseUploadfile
      ref="AmoebaWarehouseUploadfile"
    ></AmoebaWarehouseUploadfile>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
const AmoebaWarehouseUploadfile = () => import("./AmoebaWarehouseUploadfile");
export default {
  components: {
    AmoebaWarehouseUploadfile
  },
  provide() {
    return {
      autoInitData: this.autoInitData
    };
  },
  data() {
    return {
      checkVisible: false,
      labelVisble: false,
      checkVisibleeditVisble: false,
      editDataVisble: false,
      items: [
        {
          sectionPrice: "",
          sectionPrices: ""
        }
      ],
      sectionPrices: 0,
      checkForm: {},
      labelForm: {},
      editForm: {},
      editDataForm: {},
      depotAmoebaCostConfigs: [
        {
          amoebaSubjectId: "",
          costId: "",
          price: ""
        }
      ],
      amoebaSubjectNameMap: {},
      configPayNameMap: {},
      depotAmoebaCostLabelingConfigs: [],
      depotAmoebaSubjects: [],
      storageLocationSelector: [],
      chargingRuleSelector: [],
      channelWayMap: {},
      depotAmoebaCalculateFormulaMap: {},
      depotAmoebaCostConfig: {
        amoebaSubjectId: "",
        costId: "",
        price: "",
        type: 3
      },
      depotAmoebaCostConfig1: {}
    };
  },
  mounted() {
    this.autoInitData();
  },
  methods: {
    autoInitData() {
      ajax("manageDepotAmoebaPrice", {})
        .then(res => {
          if (res.code == 200) {
            var data = res.data;
            console.log(data);
            this.depotAmoebaCostConfigs = data.depotAmoebaCostConfigs;
            this.amoebaSubjectNameMap = data.amoebaSubjectNameMap;
            this.configPayNameMap = data.configPayNameMap;
            this.depotAmoebaCostLabelingConfigs =
              data.depotAmoebaCostLabelingConfigs;
            this.depotAmoebaSubjects = data.depotAmoebaSubjects;
            this.storageLocationSelector = data.storageLocationSelector;
            this.chargingRuleSelector = data.chargingRuleSelector;
            this.channelWayMap = data.channelWayMap;
            this.depotAmoebaCalculateFormulaMap =
              data.depotAmoebaCalculateFormulaMap;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    saveDepotAmoebaCostConfig() {
      ajax("saveDepotAmoebaCostConfig", this.depotAmoebaCostConfig)
        .then(res => {
          if (res.code == 200) {
            var data = res.data;
            console.log(data);
            this.$message.success("操作成功");
            this.timeout = setTimeout(() => {
              window.location.reload(true);
            }, 1000 * Math.random());
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    checkSave() {},
    labelSave() {
      console.log(this.items);
      for (var i = 0; i < this.items.length; i++) {
        if (
          this.items[i].priceCost == null ||
          this.items[i].priceSection == ""
        ) {
          alert("请补全区间");
          return false;
        }
      }
      var priceSection_array = new Array();

      for (var i = 0; i < this.items.length; i++) {
        var cur = {};
        var priceSection = this.items[i].priceSection;
        var priceCost = this.items[i].priceCost;
        cur["priceSection"] = priceSection;
        cur["priceCost"] = priceCost;
        priceSection_array.push(cur);
      }

      var priceSectionDataStr = JSON.stringify(priceSection_array);
      this.depotAmoebaCostConfig1.priceSectionJson = priceSectionDataStr;
      this.depotAmoebaCostConfig1.type = 8;
      this.depotAmoebaCostConfig1.price = 0;
      ajax("saveDepotAmoebaCostConfig", this.depotAmoebaCostConfig1)
        .then(res => {
          if (res.code == 200) {
            var data = res.data;
            console.log(data);
            this.$message.success("操作成功");
            this.timeout = setTimeout(() => {
              window.location.reload(true);
            }, 1000 * Math.random());
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    deleteDepotAmoebaForm() {
      this.$confirm("此操作是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          ajax("deleteDepotAmoebaForm", {}).then(
            res => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success("操作成功");
                this.autoInitData();
              } else {
                this.$message.error("操作失败");
              }
            },
            error => {
              console.log(error);
            }
          );
        })
        .catch(() => {});
    },
    exportDepotAmoebaPrice(i) {
      ajax("exportDepotAmoebaPrice", { isNeedFormula: i })
        .then(res => {
          if (res.path) {
            //helper.hide_loading();
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              qiao.bs.alert("导出失败");
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    batchUploadDepotAmoebaPrice() {
      this.$refs.AmoebaWarehouseUploadfile.centerDialogVisible = true;
    },
    deleteDepotAmoebaCostConfigById(id) {
      ajax("deleteDepotAmoebaCostConfigById", { id: id })
        .then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.timeout = setTimeout(() => {
              window.location.reload(true);
            }, 1000 * Math.random());
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    editSimpleLabelForm(id) {
      this.labelVisble = true;
      ajax("findDepotAmoebaCostConfigbyid", { id: id })
        .then(res => {
          this.depotAmoebaCostConfig1 = res;
          this.depotAmoebaCostConfig1.amoebaSubjectId = res.amoebaSubjectId.toString();
          this.depotAmoebaCostConfig1.costId = res.costId.toString();
          if (this.depotAmoebaCostConfig1.priceSectionJson) {
            var jsonObj = JSON.parse(
              this.depotAmoebaCostConfig1.priceSectionJson
            );
            this.items = jsonObj;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    editSimpleDialogForm(id) {
      this.checkVisible = true;
      ajax("findDepotAmoebaCostConfigbyid", { id: id })
        .then(res => {
          this.depotAmoebaCostConfig = res;
          this.depotAmoebaCostConfig.amoebaSubjectId = res.amoebaSubjectId.toString();
          this.depotAmoebaCostConfig.costId = res.costId.toString();
        })
        .catch(error => {
          console.log(error);
        });
    },
    edit() {
      this.editDataVisble = true;
    },
    onAdd(index) {
      this.items.push({ priceSection: "", priceCost: "" });
    },
    onDel(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>
<style scoped>
.border {
  border: 1px solid #d6e9c6;
  border-radius: 5px;
}
.border_blue {
  border: 1px solid #bce8f1;
  border-radius: 5px;
}
.color {
  background-color: #dff0d8;
  color: #3c763d;
  background-image: linear-gradient(to bottom, #dff0d8 0, #d0e9c6 100%);
}
.color_blue {
  background-color: #d9edf7;
  color: #31708f;
  background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%);
}
/deep/.el-select {
  width: 100%;
}
.table-data {
  width: 100%;
  background: #fff;
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
  border-collapse: collapse;
  text-align: left;
}
.table-data td,
th {
  padding: 2px 4px;
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
}
</style>
